* {
    /* 清除内外边距 */
    margin: 0;
    padding: 0;
}
/* 引入字体图标 */
@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?d41lhj');
    src:  url('fonts/icomoon.eot?d41lhj#iefix') format('embedded-opentype'),
          url('fonts/icomoon.ttf?d41lhj') format('truetype'),
          url('fonts/icomoon.woff?d41lhj') format('woff'),
          url('fonts/icomoon.svg?d41lhj#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
/* .clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
} */

.w {
    /* 这个用来给盒子做左右边距 */
    margin: 0 360px;
}

a {
    /* 清除链接的下划线 */
    text-decoration: none;
}

li {
    /* 去除li前面的小圆点 */
    list-style: none;
}

body {
    margin: 0 auto;
    width: 1920px;
    font-family: "Source Han Sans CN"
}

/* 横条 */
.column {
    position: relative;
    /* margin-top: 100px; */
    width: 140px;
    height: 60px;
    text-align: center;
    color: #636363;
    margin: 0 auto;
}
.column::before,
.column::after {
    /* 用伪元素做出文字两旁的横线 需要用定位将它们移动到准确位置 */
    position: absolute;
    top: 40px;
    content: '';
    width: 500px;
    height: 1px;
    background-color: #636363;
}
.column::before {
    left: 137px;
}
.column::after {
    right: 137px;
}
.column h3 {
    font-weight: 400;
    font-size: 28px;
    margin-bottom: 5px;
}
.column p {
    font-size: 18px;
}
/* 头部 */
header {
    /* float: left; */
    width: 1200px;
    height: 90px;
    margin: 0 auto;
}
header .logo {
    /* 千库的logo */
    float: left;
    margin: 24px -100px;
}
header nav {
    float: left;
    margin-left: 499px;
}
header nav ul li {
    float: left;
    margin: 24px 0;
}
header nav ul li a {
    display:block;
    height: 44px;
    padding: 0 5px;
    margin-right: 43px;
    font-size: 16px;
    line-height: 44px;
    font-weight: 500;
    color: rgb(51,51,51);
    transition: all 1s;
}
header nav ul li a:hover {
    margin-bottom: 24px;
    /* 鼠标悬停后弄出下边框 */
    /* 注意上一个选择器要添加display:block; */
    border-bottom: 1px solid rgb(51,51,51);
    background-color: rgba(51,51,51,.2);
}
/* 头部 */

/* banner部分 */
.banner {
    /* 子绝父相 父元素用相对定位 */
    position: relative;
    height: 687px;
    /* 添加背景图片 */
    /* 为啥我这个图的比例有点不对捏 */
    background: url(image/banner.png) no-repeat top center;
}
.banner::before {
    /* 给banner加灰色遮罩 */
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.4) ;
}

.banner .leftarrow a,
.rightarrow a{
    /* 左右箭头的共同元素 */
    position: absolute;
    top: 297px;
    font-family: 'icomoon';
    font-size: 50px;
    color: #fff;
    transition: all .5s;
}
.banner .leftarrow a{
    /* 左箭头的定位 */
    left: 171px;
}
.banner .rightarrow a{
    /* 右箭头的定位 */
    right: 171px;
}
.banner a:hover {
    /* 两个箭头碰到的动效 */
    font-size: 70px;
    color: rgb(116, 205, 240);
}
.banner .font {
    /* 给这些文字的共同元素加一个 */
    /* 绝对定位居中 层级优先 */
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    z-index: 999;

    text-align: center;
    color: #fff;
}
.banner .font1 {
    top: 203px;

    width: 711px;
    height: 113px;
    line-height: 113px;
    font-size: 118.5px;
 
}
.banner .font2 {
    top: 359px;

    width: 190px;
    height: 59px;
    line-height: 59px;
    font-size: 32.5px;
    padding-top: 15px;
    border-top: 5px solid #fff;
}
.banner .font3 {
    top: 460px;

    width: 298px;
    height: 36px;
    line-height: 36px;
    font-size: 32.5px;

}
.banner .promo {
    /* 轮播图的盒子 */
    position: absolute;
    top: 630px;
    left: 50%;
    transform: translate(-50%,0);
    z-index: 999;

    width: 176px;
    height: 19px;
    /* padding: 0 10px; */
}
.banner .promo  a{
    float: left;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background-color: rgba(128,137,141,.4);
}
.banner .promo  .ellipse a{
    /* 小椭圆 */ 
    float: left;
    width: 58px;
    height: 19px;
    margin-right: 40px;
    border-radius: 9.5px;
    background-color: #fff;
}
.banner .box {
    position: absolute;
    width: 400px;
    height: 300px;
    background-color: rgba(0, 0, 0, .3);
    border: 2px solid rgba(255, 255, 255, .4);
}
.banner .box1 {
    position: absolute;
    top: 260px;
    left: 50%;
    transform: translate(-50%,0);
    width: 775px;
    height: 185px;
    background-color: rgba(0, 0, 0, .3);
    border: 2px solid rgba(255, 255, 255, .4);
}
.banner .box2 {
    top: 80px;
    left: 930px;
    transform-origin: top left;
    transform: rotate(45deg);
}
.banner .box3 {
    top: 80px;
    /* right: 989px; */
    left: 526px;
    transform-origin: top right;
    transform: rotate(-61deg);
}
/* banner部分 */

/* 设计方案 */
.design {
    /* position: relative; */
    height: 850px;
    background-color: #fff;
}
.design .ds-pic {
    width: 1200px;
    height: 555px;
    margin: 70px auto;
}
/* 左边的盒子 里面的三个图片 */
/* 这个用了浮动的布局（感觉定位更简单啊、、、） */
.design .ds-pic .left {
    float: left;
    width: 585px;
    height: 555px;
}
.design .ds-pic .left ul li  {
    float: left;
}
.design .ds-pic .left ul li:first-child {
    margin: 0 20px;
}
.design .ds-pic .left ul li:last-child {
    margin-top: 15px;
    margin-left: 20px;
}
.design .ds-pic .right { 
    float: left;
    width: 558px;
    height: 555px;
    margin-left: 20px;

}
/* 设计方案 */

/* 加入我们广告 */
.ad {
    position: relative;
    height: 457px;
    background-color: skyblue;
    background: url(image/ad.png) no-repeat center;
}
.ad::before {
    /* 加黑色遮罩 */
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.4);
}
.ad .info {
    /* 设置文字 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    width: 821px;
    height: 369px;
    background-color: rgba(0,0,0,.4);
    border: 1px solid #547990;
    font-size: 61px;
    color: #fff;
    background-color: rgba(0,0,0,.4);
}
.ad .info1 {
    /* 设置字间距 */
    letter-spacing: 1px;
    margin-top: 30px;
}
.ad .info2 {
    margin-top: 25px;
}
.ad .info a {
    /* 下面的小灰按钮 */
    display: inline-block;
    margin-top: 60px;
    width: 260px;
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #fff;
    background-color: rgba(128,137,141,.4);
    transition: all .5s;
}
.ad .info a:hover {
    /* 给小按键加一个动效 */
    background-color: rgb(128,137,141);
    letter-spacing: 2px;
    font-weight: 600;
    font-size: 20px;
    /* color: rgba(128, 137, 141, 0); */
}
/* 加入我们广告 */

/* 经典案例 */
.classic {
    /* position: relative; */
    height: 897px;
    background-color: #fff;
}
.classic .box {
    position: relative;
    margin: 117px auto 0 auto;
    width: 1165px;
    height: 565px;
}
.classic .box>div {
    float: left;
    text-align: center;
    width: 233px;
    height: 565px;
    
    color: #636363;
}
.classic .box .info {
    margin: 20px auto;
}
.classic .box .num {
    font-size: 13px;
}
.classic .box span {
    /* 数字下面的小三角 */
    display: inline-block;
    margin-top: 10px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: #b0b0b0;
}
/* 经典案例 */

/* 签约流程 */
.signing {
    /* position: relative; */
    height: 415px;
    background-color: #f0f0f0;
}
/* 这个盒子因为背景颜色是灰色的 不能用margin-top */
/* 于是重新修改定位的数据 */
.signing .column::before,
.signing .column::after {
    /* 用伪元素做出文字两旁的横线 需要用定位将它们移动到准确位置 */
    position: absolute;
    top: 114px;
    content: '';
    width: 500px;
    height: 1px;
    background-color: #636363;
}
.signing .info {
    text-align: center;
    margin-top: 90px;

    font-size: 16px;
    color: #b0b0b0;
}
.signing .process {
    width: 913px;
    height: 40px;
    margin: 45px auto 90px auto;
    /* background-color: #547990; */
}
.signing .process ul li:nth-child(even) {
    float: left;
    margin: 16px 9px;
    width: 70px;
    height: 40px;
}
.signing .process ul li div {
    position: relative;
    width: 38px;
    height: 8px;
    /* margin-top: 4px; */
    background-color: #333;
}
.signing .process ul li div::after {
    position: absolute;
    top: -4px;
    left: 38px;
    content: '';
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-left: 30px solid #333;
}
.signing .process ul li:nth-child(odd) {
    float: left;
    text-align: center;
    width: 245px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #fff;
    background-color: #333;
}
/* 签约流程 */

/* 关于我们 */
.about {
    position: relative;
    height: 683px;
}
.about .info1 {
    text-align: center;
    margin-top: 40px;
    font-size: 16px;
    color: #b0b0b0;
}
.about img {
    position: absolute;
    top: 185px;
    left: 360px;
}
.about .info2 {
    position: absolute;
    top: 185px;
    right: 360px;
    width: 580px;
    height: 362px;
    border-top: 5px solid #f3f5f5;
}
.about .info2 h3 {
    margin: 25px auto 30px 9px;
    font-size: 27.5px;
    font-weight: normal;
}
.about .info2 p {
    margin: 0 24px 13px 16px;
    text-indent: 3em;
    font-size: 19.2px;
    line-height: 35px;
    color: #636363;
}
.about .info2 .more a{
    position: absolute;
    top: 314px;
    right: 0;
    display: block;
    text-align: center;
    width: 135px;
    height: 42px;
    line-height: 42px;
    font-size: 19.2px;
    color: #fff;
    background-color: #333;
}
/* 用伪元素做出左边的灰色 */
.about .info2 .more::before {
    position: absolute;
    content: '';
    width: 445px;
    height: 42px;
    background-color: #f3f5f5;
}
/* 关于我们 */

/* 联系我们 */
footer {
    position: relative;
    height: 743px;
    background: url(image/footer.png) no-repeat top center;
}
footer::before {
    /* 给最后的footer加灰色遮罩 */
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.4) ;
}
footer .info1 {
    position: absolute;
    top: 142px;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    /* 调整字间距 */
    letter-spacing: 1px;
    color: #fff;
}
footer .info1 h3 {
    font-weight: normal;
    font-size: 48px;
}
footer .info1 p {
    font-size: 30px;
}
footer .nav {
    position: absolute;
    top: 334px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 1200px;
    height: 43px;
    background-color: rgba(143, 196, 240, 0.4);
}
footer .nav ul {
    margin-left: 268px;
}
footer .nav a {
    float: left;
    margin-right: 105px;
    width: 85px;
    height: 43px;
    font-size: 18px;
    line-height: 43px;
    color: #fff;
    /* 调整字间距 */
    letter-spacing: 3px;
    /* 过渡准备 */
    transition: all .5s;
}
footer .nav a:hover {
    display: inline;
    color: rgb(116, 205, 240);
}
footer .info2 {
    position: absolute;
    top: 447px;
    left: 50%;
    transform: translate(-50%, 0);
}
footer .info2 p {
    text-align: center;
    font-size: 18px;
    line-height: 30px;
    color: #fff;
}
/* 联系我们 */